<template>
	<view class="root">
		<u-loading-icon v-if="status" text="头像上传中..." textSize="18"></u-loading-icon>
		<u-upload class="avatar" :fileList="imageList" @afterRead="afterRead" previewImage @delete="deletePic" name="1"
			:maxCount="1" uploadIconColor="#3C9CFF" width="300rpx" height="300rpx">
		</u-upload>
		<view class="content">
			<view class="nickname">
				<text>昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：</text>
				<u--input placeholder="请输入新昵称" border="bottom" v-model="user.nickname" clearable></u--input>
			</view>
			<view class="username">
				<text>用&nbsp;户&nbsp;名：</text>
				<u--input border="bottom" disabledColor="#e1e1e2" v-model="user.username" clearable>
				</u--input>
			</view>
			<view class="password">
				<text>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</text>
				<u--input border="bottom" disabledColor="#e1e1e2" v-model="user.password" clearable>
				</u--input>
			</view>
			<view class="phone">
				<text>手&nbsp;机&nbsp;号：</text>
				<u--input border="bottom" disabledColor="#e1e1e2" v-model="user.phone" clearable>
				</u--input>
			</view>
			<view class="mail">
				<text>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：</text>
				<u--input border="bottom" disabled disabledColor="#e1e1e2" v-model="user.mail" clearable>
				</u--input>
			</view>
			<view class="update" @click="update">
				<u-button type="success" size="large">
					<text>修改信息</text>
				</u-button>
			</view>
			<view class="out" @click="goOut(user.id)">
				<u-button type="error" size="large">
					<text>注销账号</text>
				</u-button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageList: [],
				status: false,
				user: {
					id: "",
					avatar: "",
					nickname: "",
					password: "",
					phone: "",
					mail: "",
					username: ""
				},
				msgList: {
					type: "success",
					message: "获取验证码成功"
				}
			};
		},
		onLoad() {
			uni.getStorage({
				key: "userInfo",
				success: (res) => {
					this.user = res.data;
					if (this.user == "" || !this.user) {
						this.user = this.$e.User
					}
				}
			})
		},
		methods: {
			fillMsg(type, msg) { //提示消息的赋值
				this.msgList.type = type;
				this.msgList.message = msg;
				this.$refs.uToast.show({
					...this.msgList
				})
			},
			update() {
				if (!((this.user.nickname != "") && (this.user.username != "") && (this.user.password != "") && (this.user
						.mail != "") && (this.user.phone != "") && (this.code != ""))) {
					this.fillMsg("error", "请补充完整信息!");
				} else {
					console.log("确认修改的用户信息：----", this.user);
					uni.request({
						url: this.$e.Url + "/user/updateUserInfo",
						data: this.user,
						header: {
							"Content-Type": "application/json"
						},
						method: 'PUT',
						success: (res) => {
							console.log("请求API接口【/user/updateUserInfo】", res);
							if (res.statusCode == 200 && res.data) {
								this.fillMsg("success", "修改信息成功！")
								uni.setStorage({
									key: "userInfo",
									data: this.user,
									success: () => {}
								})
								setTimeout(() => {
									uni.navigateBack();
								}, 1500);
							}
						}
					})
				}

			},
			goOut(uid) { //注销账号
				uni.request({
					url: this.$e.Url + "/user/deleteMyself",
					method: 'DELETE',
					data: uid,
					success: (res) => {
						console.log("请求API接口【/user/deleteMyself】", res);
						if (res.data.result == true) {
							this.fillMsg("success", "注销成功！")
							uni.clearStorage();
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/index/index"
								})
							}, 1500);

						}
					}
				})
			},
			deletePic(e) {
				console.log("删除照片:", e);
				this.imageList.splice(e.index, 1); //从指定位置删除元素,1表示删除
			},
			afterRead(e) {
				console.log("上传图片:", e);
				this.status = true;
				let list = [].concat(e.file);
				list.map((item) => { //map对数组每个元素都遍历一次
					setTimeout(() => {
						this.uploadImage(item.url);
					}, 1500)
				});
			},
			uploadImage(path) {
				uni.uploadFile({
					url: this.$e.Url + "/Files/upload",
					filePath: path,
					method: 'POST',
					success: (res) => {
						console.log("请求API接口【/Files/upload】", res);
						let dbdata = JSON.parse(res.data);
						this.user.avatar = dbdata.result; //注意这里要改一下
						this.imageList.push({
							status: "success",
							message: "上传成功",
							url: dbdata.result //之前是data
						})
						this.status = false;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url("/static/userbackground.jpg");
		background-size: cover;
		background-repeat: repeat;
		background-position: center center;
	}

	.root {
		padding: 100rpx 30rpx;
		display: flex;
		flex-direction: column;
		// align-items: center; //副轴
		justify-content: center; //主轴

		.avatar {
			margin: 10rpx auto 50rpx;
		}

		.content {

			background-color: #FDFDFD;
			border-radius: 30rpx;
			padding: 30rpx;
			box-shadow: 0 0 20rpx 20rpx rgba(244, 245, 247, 0.5);
			margin: 0 10rpx;

			.nickname,
			.username,
			.password,
			.phone,
			.mail {
				display: flex;
				align-items: center;
				justify-content: space-between;
				// width: 600rpx;
				height: 100rpx;

				text {
					font-size: 35rpx;
				}
			}

			.update {
				padding: 10rpx;

				text {
					font-size: 35rpx;
				}
			}

			.out {
				padding: 10rpx;

				text {
					font-size: 35rpx;
				}
			}
		}
	}
</style>
